<template>
  <el-form
    size="large"
    :rules="Rules"
    ref="menuForm"
    :model="formData"
    label-width="100px"
  >
    <el-form-item prop="menuName" label="菜单名称">
      <el-input clearable placeholder="请输入菜单名" v-model="formData.menuName"></el-input>
    </el-form-item>
    <el-form-item prop="action" label="菜单操作">
      <el-input clearable placeholder="请输入菜单路由" v-model="formData.action"></el-input>
    </el-form-item>
    <el-form-item prop="target" label="打开方式">
      <el-radio-group v-model="formData.target" @change="changeType">
        <el-radio-button v-for="item in targetList" :key="item" :label="item.value">{{item.label}}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="showOrder" label="菜单排序">
      <el-input-number v-model="formData.showOrder" :step="5" :min="0"></el-input-number>
    </el-form-item>
    <el-form-item prop="icon" label="菜单图标">
      <el-icon :size="32" v-show="formData.icon">
        <component :is="formData.icon" />
      </el-icon>
      <icon-select @selectIcon="selectIcon" :select="formData.icon"/>
    </el-form-item>
    <el-form-item prop="menuRoute" label="绑定路由">
      <el-tree-select check-strictly v-model="formData.menuRoute" :data="routerTree" :render-after-expand="false"></el-tree-select>
    </el-form-item>
    <el-form-item prop="permissionList" label="菜单授权">
      <el-tree-select v-model="formData.permissionList" :data="privilegeTree" multiple :render-after-expand="false"></el-tree-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(menuForm)">保存</el-button>
      <el-button type="info" @click="handleClose">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getArrayText } from '@/utils/common'
import { getCode } from '@/api/system/code/CodeManager'
import IconSelect from '@/components/iconSelect/IconSelect'
import { MenuBeanData, Rules } from '@/model/system/menu/MenuConstants'
import { loadTreeData } from '@/api/system/router/RouterManager'
import { loadSelectTree } from '@/api/system/privilege/PrivilegeManager'
import { loadMenuById, saveMenu, getMaxIndex } from '@/api/system/menu/MenuManager'

const menuForm = ref()
const targetList = ref([])
const routerTree = ref([])
const privilegeTree = ref([])
const emit = defineEmits(['close-dialog', 'reload-data'])
const props = defineProps({ fid: String, id: String })
const formData = ref({ ...MenuBeanData, fid: props.fid })

const handleClose = () => {
  emit('close-dialog')
}

const selectIcon = (item) => {
  formData.value.icon = item
}

const submitForm = async (menuForm) => {
  if (!menuForm) return
  menuForm.validate(valid => {
    if (valid) {
      saveMenu(formData.value).then(() => {
        ElMessage({
          message: '保存成功!',
          type: 'success',
          duration: 800
        })
        emit('reload-data')
        emit('close-dialog')
      }).catch(() => {
        ElMessage.error('保存失败！')
      })
    }
  })
}

const changeType = (value) => {
  formData.value.targetText = getArrayText(value, targetList.value)
}

onMounted(async () => {
  await getCode('01GR44RNK0C9CC2849YM1NCQYR').then(data => {
    targetList.value = data
  })

  loadTreeData().then(data => {
    routerTree.value = data
  })

  loadSelectTree().then(data => {
    privilegeTree.value = data
  })

  const id = props.id
  if (id) {
    loadMenuById(id).then(data => {
      formData.value = { ...data }
    })
  } else {
    formData.value.target = 'main'
    formData.value.targetText = getArrayText(formData.value.target, targetList.value)
    getMaxIndex(props.fid).then(data => {
      formData.value.showOrder = data + 5
    })
    console.log(formData.value)
  }
})
</script>

<style scoped>
.el-icon{
  margin-right: 10px
}
</style>
